<template>
  <div class="flex-1 relative ml-10 w-1">
    <div class="w-100 h-100">
      <route-topo
        v-if="showTopoName === 'routeTopo'"
        ref="routeTopo"
        :route-list="routeList"
        :active-route="activeRoute"
      />
      <link-topo
        v-if="showTopoName === 'linkTopo'"
        ref="linkTopo"
        :left-data="leftData"
        :migrate-route="activeRoute"
        @cutChange="cutChange"
      />
    </div>
    <div
      v-if="showTopoName === 'routeTopo'"
      class="pop-box flex-column"
      :class="showRight ? 'active' : ''"
    >
      <div class="prop-btn" @click="$debounce(showRightFn)">
        <span v-if="!showRight" style="margin-left: -5px">《</span>
        <span v-else>》</span>
      </div>
      <div class="title">{{ $t('SELECT_TARGET_LINK') }}</div>
      <div class="flex-1 route-list h-1">
        <div
          v-for="(route, index) in routeList"
          :key="index"
          class="route-item"
          :class="activeRoute && activeRoute.linkId === route.linkId ? 'active' : ''"
          @click="selectRoute(route)"
          @mouseenter="mouseEvent(route, 'enter')"
          @mouseleave="mouseEvent(route, 'leave')"
        >
          {{ getLink(route) }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import RouteTopo from './RouteTopo'
  import linkTopo from './LinkTopo'
  export default {
    components: {
      RouteTopo,
      linkTopo
    },
    props: {
      routeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        formData: {},
        showRight: false,
        selectedLine: [],
        activeRoute: null,
        showTopoName: 'routeTopo',
        leftData: null
      }
    },
    computed: {
      ...mapGetters(['baseRegionList'])
    },
    watch: {
      routeList() {
        this.activeRoute = null
        this.showTopoName = 'routeTopo'
        this.showRight = true
      }
    },
    methods: {
      showRightFn() {
        this.showRight = !this.showRight
      },
      getLink(routeData) {
        const items = []
        routeData.segmentList.forEach((i, index) => {
          const startStationData = this.baseRegionList.find(j => j.regionId === i.startStationId)
          const endStationData = this.baseRegionList.find(j => j.regionId === i.endStationId)
          i.startStationName = startStationData ? startStationData.regionName : ''
          i.endStationName = endStationData ? endStationData.regionName : ''
          if (index === 0 && startStationData) {
            items.push(startStationData.regionName)
          }
          if (i.cableId && i.cable) {
            items.push(i.cable.cableName)
          }
          if (endStationData) {
            items.push(endStationData.regionName)
          }
          this.showTopoName = 'routeTopo'
        })
        return items.join('——>')
      },
      selectRoute(data) {
        this.activeRoute = data
      },
      mouseEvent(data, type) {
        this.$refs.routeTopo.hoverEdge(data, type)
      },
      goCutover(data) {
        if (!this.activeRoute) {
          this.$message.error(this.$t('SELECT_TARGET_LINK'))
          return
        }
        this.leftData = data
        console.log('this.activeRoute', this.activeRoute)
        this.showTopoName = 'linkTopo'
      },
      cutChange(data) {
        this.$emit('cutChange', data)
      }
    }
  }
</script>
<style lang="scss">
  @import '@/assets/css/mixin.module.scss';
  .pop-box {
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    font-size: 14px;
    transition: all 0.5s ease;
    border: none;
    @include themeify {
      background: rgba($color: themed('bgColor'), $alpha: 0.6);
    }

    &.active {
      width: 300px;
      padding: 10px;
      @include themeify {
        border: 1px solid themed('tableBorderColor');
      }
    }

    .title{
      padding:5px 10px;
      @include themeify {
       color: #fff !important;
       background: themed('collapseHeaderBgColor');
      }
    }

    .prop-btn {
      position: absolute;
      left: -10px;
      top: 50%;
      margin-top: -50px;
      width: 10px;
      height: 100px;
      font-size: 12px;
      line-height: 100px;
      text-align: center;
      @include themeify {
        background: rgba($color: themed('homeBoxBgColor'), $alpha: 0.6);
        color: themed('textColor');
        border: 1px solid themed('tableBorderColor');
      }
      border-radius: 30px 0 0 30px;
      cursor: pointer;
    }

    .route-list {
      overflow-y: scroll;
    }

    .route-item {
      margin-top: 10px;
      padding: 5px 10px;
      word-break: break-all;
      cursor: pointer;
      @include themeify {
        color: themed('textColor');
        border: 1px solid themed('tableBorderColor');
      }

     &:hover {
        @include themeify {
          background: rgba($color: themed('tabsActiveBgColor'), $alpha: 0.3);
        }
      }

      &.active {
        @include themeify {
          background: rgba($color: themed('tabsActiveBgColor'), $alpha: 0.6);
        }
      }
    }
  }
</style>
